<template>
    <div class="search-group">
        <input v-model="keyword" placeholder="搜索您喜欢的..." />
        <div class="search-btn" @click="onSearch">
            <img :src="`${_oss_}images/mobile/icon-search.svg`" />
            搜索
        </div>
    </div>
</template>
<script setup>
import { ref } from "vue";

const emits = defineEmits(["search"]);
const keyword = ref("");

const onSearch = () => {
    emits("search", keyword.value);
};
</script>
<style lang="scss" scoped>
.search-group {
    display: flex;
    border-radius: 3px;
    overflow: hidden;

    input {
        width: 130px;
        height: 30px;
        border: none;
        outline: none;
        background-color: #fff;
        padding: 0 10px;
        font-size: 13px;

        &::placeholder {
            color: #999;
        }
    }

    .search-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        background-color: #5085fb;
        color: #fff;
        font-size: 13px;

        img {
            width: 12px;
            height: 12px;
            margin-right: 3px;
        }
    }
}
</style>
